import { useState, useEffect } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import './AllTheVideo.css';
import NewNavbar from './newHead';
import coursePage from './coursePage.png';
// 导入简化版 LazyLoad 组件（已分离 CSS）
import LazyLoad from './lazyload';
export default function AllVideo() {
  // 状态管理
  const [searchParams] = useSearchParams();
  const [videos, setVideos] = useState([]); // 所有视频数据
  const [loading, setLoading] = useState(true); // 加载状态
  const [error, setError] = useState(null); // 错误信息
  const [activeCategory, setActiveCategory] = useState('all'); // 当前选中的分类
  const email = searchParams.get("email"); // 从路由获取邮箱参数

  // 从后端获取视频数据
  useEffect(() => {
    const fetchVideos = async () => {
      try {
        const response = await fetch('http://localhost:5000/api/videos/all');
        if (!response.ok) {
          throw new Error('获取视频列表失败');
        }
        const data = await response.json();
        setVideos(data);
        setError(null);
      } catch (err) {
        setError(err.message || '加载视频时发生错误');
        console.error('视频加载错误:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchVideos();
  }, []);

  // 获取所有唯一分类（用于筛选）
  const categories = ['all', ...new Set(videos.map(video => video.category))];

  // 根据选中分类筛选视频
  const filteredVideos = activeCategory === 'all' 
    ? videos 
    : videos.filter(video => video.category === activeCategory);

  // 加载中状态
  if (loading) {
    return (
      <div className="video-loading">
        <div className="spinner"></div>
        <p>正在加载视频列表...</p>
      </div>
    );
  }

  // 错误状态
  if (error) {
    return (
      <div className="video-error">
        <p>❌ {error}</p>
        <button onClick={() => window.location.reload()}>重试</button>
      </div>
    );
  }

  // 无数据状态
  if (videos.length === 0) {
    return (
      <div>
        <div className="home-bg">
          <img 
            src={coursePage}
            alt="健身背景" 
            className="home-img"
          />
          <div className="home-overlay"></div>
        </div>
        <NewNavbar/>
        <div className="no-videos">
          <p>暂无视频数据</p>
        </div>
      </div>
    );
  }

  return (
    <div>
      {/* 背景图 + 导航栏 */}
      <div className="home-bg">
        <img 
          src={coursePage}
          alt="健身背景" 
          className="home-img"
        />
        <div className="home-overlay"></div>
      </div>
      <NewNavbar/>

      {/* 视频列表容器 */}
      <div className="all-videos-container">
        <h1>所有视频</h1>
        
        {/* 分类筛选栏 */}
        <div className="video-categories">
          {categories.map(category => (
            <button
              key={category}
              className={`category-btn ${activeCategory === category ? 'active' : ''}`}
              onClick={() => setActiveCategory(category)}
            >
              {category === 'all' ? '全部视频' : category}
            </button>
          ))}
        </div>
        
        {/* 视频网格列表（核心：使用 LazyLoad 组件加载缩略图） */}
        <div className="videos-grid">
          {filteredVideos.map(video => (
            <div key={video.id} className="video-card">
              {/* 视频缩略图（懒加载核心） */}
              <div className="video-thumbnail">
                <LazyLoad
                  // 优先使用后端返回的缩略图，无则用 picsum 占位
                  src={video.thumbnailUrl || `https://picsum.photos/seed/${video.id}/400/225`}
                  alt={video.name}
                  className="thumbnail-img" // 自定义类名（可在 AllTheVideo.css 中覆盖样式）
                />
                <div className="play-icon">▶</div>
              </div>
              
              {/* 视频信息 */}
              <div className="video-info">
                <span className="video-category">{video.category}</span>
                <h3 className="video-title">{video.name}</h3>
                <p className="video-description">{video.description}</p>
                
                {/* 播放按钮（跳转播放页） */}
                <Link 
                  to={`/Watch?VideoPath=${video.videoUrl}&email=${email}`}
                  className="watch-button"
                >
                  播放视频
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}